<template>
	<view>
		<view class="chartsContainer">
			<view class="qiun-charts">
				<canvas canvas-id="creditChart" id="creditChart" class="charts"></canvas>
			</view>
			<view class="chartsUpdateTime">
				下次更新2021年2月20日
			</view>
		</view>
		<view class="creditRight">
			<view class="creditRight-header">
				信用权益
			</view>
			<view class="creditRight-main">
				<view class="creditRight-main-item" v-for="item in icons" @click="warn" :key="item.name">
					<text class="creditRight-main-item-icon">
						<icon-svg :icon-class="item.icon" :key='item.name'></icon-svg>
					</text>
					<view>{{item.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _self;
	var creditChart = null;
	import uCharts from '@/components/u-charts/u-charts.js';
	export default {
		onLoad() {
			this.showCharts()
		},
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				gaugeWidth: 15,
				creditChartData: {
					categories: [{
						value: 1,
						color: '#1678FF'
					}],
					series: [{
						name: 'A',
						data: 0.9
					}]
				},
				icons: [{
					name: '优先审批',
					icon: 'xiaolian1'
				}, {
					name: '见票即付',
					icon: 'xianjin'
				}, {
					name: '提高借款额度',
					icon: 'edu'
				}, {
					name: '延长借款期限',
					icon: 'yanshi'
				}]
			}
		},
		methods: {
			showCharts() {
				_self = this;
				this.cWidth = uni.upx2px(750);
				this.cHeight = uni.upx2px(500);
				this.showGauge('creditChart', this.creditChartData);

			},
			showGauge(canvasId, chartData) {
				creditChart = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'gauge',
					fontSize: 11,
					legend: false,
					title: {
						name: '信用极好',
						color: chartData.categories[0].color,
						fontSize: 15 * _self.pixelRatio,
						offsetY: 50 * _self.pixelRatio, //新增参数，自定义调整Y轴文案距离
					},
					subtitle: {
						name: chartData.series[0].name,
						color: 'black',
						fontSize: 50 * _self.pixelRatio,
						offsetY: -40 * _self.pixelRatio, //新增参数，自定义调整Y轴文案距离
					},
					extra: {
						gauge: {
							type: 'progress',
							width: _self.gaugeWidth * _self.pixelRatio, //仪表盘背景的宽度
							startAngle: 0.75,
							endAngle: 0.25,
							startNumber: 0,
							endNumber: 100,
							splitLine: {
								fixRadius: 0,
								splitNumber: 10,
								width: _self.gaugeWidth * _self.pixelRatio, //仪表盘背景的宽度
								color: '#FFFFFF',
								childNumber: 5,
								childWidth: _self.gaugeWidth * 0.4 * _self.pixelRatio, //仪表盘背景的宽度
							},
						}
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: true,
				});
			}
			,warn(){
				console.log('2')
				uni.showToast({
				    title: '标题',
				    duration: 200
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chartsContainer {
		background-color: white;
		text-align: center;
		padding: 10rpx 0;
	}

	.chartsUpdateTime {
		color: $uni-text-color-grey;
	}

	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	.creditRight{
		margin-top: 40rpx;
		background-color: white;
		padding: 15rpx;
	}
	.creditRight-header{
		font-weight: 600;
		margin:10rpx;
		
	}
	.creditRight-main{
		display: flex;
		
	}
	.creditRight-main-item{
		display: inline-block;
		flex: 1;
		font-size: 20rpx;
		text-align: center;
	}
	.creditRight-main-item-icon{
		font-size: 80rpx;
	}
</style>
